<template>
  <div class="box">
    <img src="../assets/img/arrow-right-black.png" alt="" />
    <div class="login">手机验证码登录</div>
    <van-cell-group inset class="cell">
      <!-- 输入手机号，调起手机号键盘 -->
      <div>
        <van-field
          v-model="tel"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
        />
        <van-button type="primary" class="btn" @click="getyzm"
          >获取验证码</van-button
        >
      </div>
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      />
    </van-cell-group>
    <van-button type="primary" size="large" class="denglu" @click="Login"
      >登录</van-button
    >
  </div>
</template>

<script>
import { getCodeApi, loginApi } from "../../utils/api";

export default {
  data() {
    return {
      tel: "",
      sms: "",
    };
  },
  methods: {
    getyzm() {
      // console.log(this.$router.options.routes[1].children[3].meta.loginmes);
      console.log(this.tel);
      getCodeApi({ phone: this.tel }).then((res) => {
        console.log(res);
        // console.log(this.$route);
      });
    },
    Login() {
      loginApi({ phone: this.tel, code: this.sms }).then((res) => {
        console.log(res);
        if (res.status == 0) {
          // console.log("注册成功");
          // 给我的页面添加元信息权限
          this.$router.options.routes[1].children[3].meta.loginmes = true;
          console.log(this.$router.options.routes[1].children[3].meta.loginmes);
          localStorage.setItem("user", this.tel);
          localStorage.setItem("token", res.result.token);
          this.$router.push("/home/mine");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  .login {
    margin-top: 20px;
    font-size: 24px;
    height: 70px;
    width: 100%;
    line-height: 70px;
    margin-left: 10px;
  }
  .cell {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 20px;
    .van-cell {
      height: 60px;
      font-size: 16px;
    }
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  .van-cell-group--inset {
    border-radius: 0px;
  }
  .denglu {
    margin: 30px 0;
  }
  img {
    width: 20px;
    height: 25px;
    transform: rotate(-180deg);
    margin-top: 10px;
    align-self: flex-start;
    cursor: pointer;
  }
}
</style>
